<template>
  <view class="ikz-glist" :style="'margin-top:'+css_info.margin_top+'upx;'">
    <view class="ikz-sticky-box" id="ikz-sticky-box">
      <view class="ikz-sticky-title" v-for="(item,index) in showType.list" :key="index"><text class="ikz-textcenter"
          :style="current == index ? 'font-weight: 800;color: #FDAF66;border-bottom:6rpx solid #FDAF66;':''"
          @click="change" :data-index="index" :data-id="item.id">{{item.server_name}}</text></view>
    </view>
    <view class="ikz-box">
      <view class="ikz-sticky-item" v-for="(item,index) in showData.list" :key="index" @click="godetail(item.id)">
        <view class="ikz-sticky-top">
          <view class="ikz-sticky-head">
            <image class="ikz-sticky-img" :src="item.avatar"></image>
          </view>
          <view class="ikz-sticky-head-right">
            <view class="ikz-sticky-head-right-box">
              <view class="ikz-sticky-head-name">
                {{item.nickname}}
              </view>
              <view class="ikz-sticky-head-time">
                {{item.time}}
              </view>
            </view>
            <view class="ikz-sticky-head-right-box">
              <view class="ikz-sticky-head-card">
                {{item.type_text}}
              </view>
              <view class="ikz-sticky-head-price">
                ￥{{item.total_fee}}
              </view>
            </view>
          </view>
        </view>
        <view class="ikz-sticky-content" v-if="item.information">
          {{item.information}}
        </view>
        <view>
          <view class="ikz-sticky-end">
            <view class="ikz-sticky-start" v-if="item.game_platform">
              <view class="ikz-sticky-spot2"></view>
              游戏名称：{{item.game_platform}}
            </view>
          </view>
          <view class="ikz-sticky-end">
            <view class="ikz-sticky-start" v-if="item.game_time">
              <view class="ikz-sticky-spot1"></view>
              游戏时长：{{item.game_time}}
            </view>
          </view>
          <view class="ikz-sticky-end">
            <view class="ikz-sticky-start" v-if="item.receive_limit">
              <view class="ikz-sticky-spot"></view>
              游戏限制：{{item.receive_limit}}
            </view>
          </view>
          <view class="ikz-sticky-end">
            <view class="ikz-sticky-start" v-if="item.expected_delivery_time">
              <view class="ikz-sticky-spot"></view>
              预计交货时间：{{item.expected_delivery_time}}
            </view>
          </view>
          
          <view class="ikz-sticky-end">
            <view class="ikz-sticky-start" v-if="item.lease_duration">
              <view class="ikz-sticky-spot2"></view>
              租借时长：{{item.lease_duration}}
            </view>
          </view>
          <view class="ikz-sticky-end">
            <view class="ikz-sticky-start" v-if="item.hope_arrive">
              <view class="ikz-sticky-spot2"></view>
              期望送达：{{item.hope_arrive}}
            </view>
          </view>
          <view class="ikz-sticky-start" v-if="item.start">
            <view class="ikz-sticky-spot"></view>
            起点：{{item.start}}
          </view>
          <view class="ikz-sticky-end">
            <view class="ikz-sticky-start" v-if="item.destination">
              <view class="ikz-sticky-spot1"></view>
              目的地：{{item.destination}}
            </view>
          </view>
          
          <view class="ikz-sticky-buttom" v-if="item.status == 0">
            <view class="ikz-sticky-btn" @click.stop="pay(item.id,item.total_fee)">
              去支付
            </view>
            <view class="ikz-sticky-btn1" @click.stop='cancel(item.id,index)'>
              取消订单
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="ikz-more" v-if="moreStatus == 4">
      ——我也是有底线的——
    </view>
    <view class="ikz-more" v-if="moreStatus == 5">
      <image class="ikz-empty" src="/static/empty.png"></image>
    </view>
  </view>
</template>

<script>
  import ikz from "@/pages/Common/tools"
  export default {
    name: 'myorderindex',
    props: {
      showType: {
        type: Object,
      },
      showData: {
        type: Object,
      },
      cssData: {
        type: Object,
      },
      moreStatus: {
        type: String,
      },
      typeIndex:{
        type: String,
      }
    },
    data() {
      return {
        duration: 500,
        current: 0,
        css_info: {
          margin_top: 0,
        },
        winHeight: 0,
        scroll_status: true,
        scrollTop: 0,
      };
    },
    watch: {
      typeIndex: {
        handler(newName, oldName) {
          if(newName == ''){
            this.current = 0;
          }else if(newName == 0){
            this.current = 1;
          }else if(newName == 1){
            this.current = 2;
          }else if(newName == 2){
            this.current = 3;
          }else if(newName == 3){
            this.current = 5;
          }else if(newName == 4){
            this.current = 4;
          }
        },
        immediate: true,
        deep: true
      }
    },
    mounted() {
      const query = uni.createSelectorQuery().in(this);
      query.select('#ikz-sticky-box').boundingClientRect(data => {
        this.$emit('returnglist', data.top);
      }).exec();
      var that = this;
      uni.getSystemInfo({
        success: function(res) {
          that.winHeight = res.windowHeight;
        }
      });
    },
    methods: {
      godetail(id){
        uni.navigateTo({
         url:'/pages/Component/Module/Campus/Program/Order/detail/index?id='+id 
        })
      },
      change: function(e) {
        this.current = e.currentTarget.dataset.index;
        this.$emit('returnId',e.currentTarget.dataset.id)
      },
      pay(id,totle_fee){
        uni.navigateTo({
          url: '/pages/Component/Module/Payment/Program/pay/index/index?orderid=' + id +
            '&total_price=' + totle_fee
        })
      },
      cancel(id,index){
        uni.showModal({
            title: '提示',
            content: '确定取消订单？',
            success: function (res) {
                if (res.confirm) {
                  var path = '/xyb/order/cancel';
                  var data = {
                  	orderid:id
                  };
                  ikz.post(path, data, res => {
                  	if (res.data.code) {
                      uni.showToast({
                          title: '取消成功',
                          duration: 2000
                      });
                      this.showData.list.splice(index,1);
                      console.log(index)
                      if(this.showData.list.length == 0){
                        this.moreStatus = 5;
                      }
                  		this.$forceUpdate();
                  	} else {
                  		uni.showModal({
                  			title: '提示',
                  			content: res.data.msg,
                  			showCancel: false,
                  			success: function(res) {}
                  		});
                  	}
                    fn();
                  });
                } else if (res.cancel) {
                    console.log('用户点击取消');
                }
            }
        });
       
      },

    }
  };
</script>

<style>
  .ikz-sticky-box {
    /* #ifndef APP-PLUS-NVUE */
    display: flex;
    position: -webkit-sticky;
    /* #endif */
    position: sticky;
    top: var(--window-top);
    z-index: 999;
    flex-direction: row;
    margin: 0px;
    padding: 15px 0 15px 0;
    white-space: nowrap;
    overflow-x: auto;
    background: #fff;
  }

  .ikz-sticky-title {
    box-sizing: border-box;
    padding: 0 20rpx;
    display: inline-block;
    text-align: center;
  }

  .ikz-textcenter {
    padding-bottom: 10rpx;
  }

  /* list */
  .ikz-sticky-item-box {
    overflow-x: auto;
  }

  .ikz-sticky-item {
    box-sizing: border-box;
    padding: 30rpx;
    width: 95%;
    margin: 0 auto 20rpx;
    background: #FFFFFF;
    border-radius: 15rpx;
  }

  .ikz-sticky-top {
    display: flex;
    align-items: center;
  }

  .ikz-sticky-img {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
  }

  .ikz-sticky-head-right {
    margin-left: 20rpx;
    width: 85%;
  }

  .ikz-sticky-head-right-box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 50rpx;
  }

  .ikz-sticky-head-time {
    color: #888;
    font-size: 25rpx;
  }

  .ikz-sticky-head-card {
    background-color: #FDAF64;
    color: #fff;
    font-size: 23rpx;
    border-radius: 15rpx;
    padding: 0px 10rpx;
    text-align: center;
    line-height: 45rpx;

  }

  .ikz-sticky-head-price {
    color: #FDAF64;
  }

  .ikz-sticky-content {
    line-height: 45rpx;
    font-size: 30rpx;
    margin: 15rpx 0;
  }

  .ikz-sticky-head-name {
    font-size: 28rpx;
  }

  .ikz-sticky-start {
    display: flex;
    align-items: center;
    font-size: 28rpx;
    line-height: 50rpx;
  }

  .ikz-sticky-spot {
    width: 20rpx;
    height: 20rpx;
    border-radius: 50%;
    background-color: #76A8FD;
    margin-right: 20rpx;
  }

  .ikz-sticky-spot1 {
    width: 20rpx;
    height: 20rpx;
    border-radius: 50%;
    background-color: #FF8800;
    margin-right: 20rpx;
  }
  .ikz-sticky-spot2 {
    width: 20rpx;
    height: 20rpx;
    border-radius: 50%;
    background-color: #4dfde9;
    margin-right: 20rpx;
  }

  .ikz-sticky-end {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .ikz-sticky-buttom{
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .ikz-sticky-btn {
    background: #42D5BE;
    color: #fff;
    padding: 0 40rpx;
    border-radius: 15rpx;
    line-height: 50rpx;
    font-size: 26rpx;
    margin-left: 15rpx;
  }
  .ikz-sticky-btn1{
    background: #d51316;
    color: #fff;
    padding: 0 20rpx;
    border-radius: 15rpx;
    line-height: 50rpx;
    font-size: 26rpx;
    margin-left: 15rpx;
  }
  .ikz-more{
    width:100%;
    text-align: center;
    line-height: 50rpx;
    color: #999999;
    padding-bottom: 25rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ikz-empty{
    width: 150rpx;
    height: 150rpx;
    margin-bottom: 20rpx;
    margin-top: 150rpx;
  }
</style>
